<template>
  <div class="source-wrap scene-edit-box">
	    <el-tabs
	      v-model="activeName"
	      type="card"
	      class="demo-tabs"
	      @tab-click="handleClick"
	    >
	      <el-tab-pane label="用户日志" name="user">
			  <UserLog ref="userLogRef"></UserLog>
		  </el-tab-pane>
	      <el-tab-pane label="渲染日志" name="render">
			  <RenderLog ref="renderLogRef"></RenderLog>
		  </el-tab-pane>
<!-- 	      <el-tab-pane label="系统日志" name="sys">
			  <SysLog></SysLog>
		  </el-tab-pane> -->
	    </el-tabs>

  </div>
</template>
<script lang="ts" setup>
	import UserLog from "./components/UserLog.vue";
	import RenderLog from "./components/RenderLog.vue";
	/* import SysLog from "./components/SysLog.vue"; */
	
	import type { TabsPaneContext } from 'element-plus'
	const activeName=ref('user');
	const renderLogRef=ref();
	const userLogRef=ref();

	const handleClick = (tab: TabsPaneContext, event: Event) => {
		if('render'==tab.paneName){
			renderLogRef.value.load();
		}else{
			userLogRef.value.load();
		}
	}
	
	onMounted(() => {
		userLogRef.value.load();
	});
</script>
<style scoped>
	
	:deep(.el-tabs--card>.el-tabs__header .el-tabs__item.is-active ){
		border-bottom-color: transparent !important;
		color: #3fa3ff;
	}
	
	:deep(.el-tabs__header) {
	    margin: 0 0 5px;
	}
	
 	:deep(.el-tab-pane) {
	   height: calc(100% - 95px);
	   position: fixed;
	   width: 100%;
	   overflow: hidden;
	} 
	
	:deep(.el-tabs--card>.el-tabs__header .el-tabs__nav) {
	    border: 1px solid var(--el-border-color-light);
	    border-bottom: none;
		border-radius:0px;
	    box-sizing: border-box;
	}
	
	:deep(.el-tabs--card>.el-tabs__header .el-tabs__item) {
	    border-bottom: 1px solid transparent;
	    border-left: 1px solid var(--el-border-color-light);
	    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	}
	
	:deep(.el-tabs__item) {
		color: #9c9da5 ;
	}
	
	:deep(.el-range-separator) {
		color: #9c9da5 ;
	}
	
	:deep(.el-table__inner-wrapper::before) {
	    background-color: transparent !important;
	}
	
/* 	.nav-ul{
		>li{
			list-style: none;
			height: 1.875rem;
			border-left: 2px solid transparent;
			color: #ffffff;
			border-bottom: 1px solid #4c4c56 ;
			font-size: 0.75rem;
			display: flex;
			align-content: center;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			cursor: pointer;
			padding-left: 0.3125rem;
		}
		>li:hover{
			background-color: #3fa3ff96; 
			border-left: 2px solid #3fa3ff;
		}
		>li.active{
			background-color: #3fa3ff96;
			border-left: 2px solid #3fa3ff;
		}
	} */
</style>